<template>
  <div id="login">
      <section>
          <label for="">
              账号：
              <input type="text" v-model="item.userName">
          </label>
      </section>
      <section>
          <label for="">
              密码：
              <input type="password" v-model="item.userPwd">
          </label>
      </section>
      <section>
          <button @click="signin">登录</button>
      </section>
      <p>默认用户名为admin密码为123456</p>
  </div>
</template>

<script>
import store from '../store.js'
export default {
    data:function(){
        return {
            item:{
                userName:'',
                userPwd:''
            }
        }
    },
    methods:{
        signin(){
            console.log(this.item);
            if(this.item.userName == 'admin' && this.item.userPwd == '123456'){
                store.setLogin(true);
                localStorage.setItem('user',this.item.userName)
                this.$router.push({path:'/'});
            }else{
                alert("用户名或密码错误");
            }
        }
    }
}
</script>

<style scoped>
    #login{
        width: 400px;
        height:400px;
        margin:0 auto;
        display:flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: space-around;
    }
    section{
        width:100%;
        flex:none;
        display: flex;
        justify-content: center;
    }
    button{
        width: 20%;
        height:40px;
        line-height:40px;
        border:none;
        background-color: orangered;
        color:#fff;
        text-align: center;
    }
</style>